<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>购物车</title>  
    <style>  
    	*{
    		margin:0;
    		padding:0;
    	}
        #addToCart {  
            position: fixed;
            left: 600px;  
            cursor: pointer;  
            width: 100px;  
            height: 40px;  
            line-height: 40px;  
            border: 1px solid deeppink;  
            text-align: center;  
            color: deeppink;  
            top:500px;
        }  
        #addToCart:hover {  
            color: #fff;  
            background-color: deeppink;  
        }  
  
        #shopCart {  
            position: fixed;  
            right: 0;  
            top: 200px;  
            color: red;  
        }  
        #shopNum{
        	width: 60px;
        	height: 25px;
        	background: deeppink;
        	color:black;
        	text-align: center;
        	line-height: 25px;
        }
        .active{
        	width: 25px;
        	height: 25px;
        	background: skyblue;
        	position: absolute;
        }
    </style>
	<body>
		<div id="addToCart">  
		   添加到购物车  
		</div>  	
		<div id="shopCart">  
		    购物车  
		  <p id="shopNum">0</p>
		</div>
	</body>
</html>
<script src="../utils.js"></script>
<script type="text/javascript">
window.onload = function () {

  class Fly {
    constructor () {
      this.btn = document.querySelector('#addToCart')
      this.cart = document.querySelector('#shopCart')
      this.shopNum = document.querySelector('#shopNum')
      this.bindEvent()
    }
    bindEvent () {
      this.btn.onclick = e => {
        // 起始点
        var x1 = e.pageX
        var y1 = e.pageY
        // 终点
        var x2 = utils.getBodyOffset(this.cart).left
        var y2 = utils.getBodyOffset(this.cart).top
        // 最高点
        var x3 = x2 - 200
        var y3 = 40

        console.log(x1, y1)
        console.log(x2, y2)
        console.log(x3, y3)

        // 根据公式来计算一元二次方程里的三个系数
        this.a = -((y2-y3)*x1 - (x2-x3)*y1 + x2*y3 - x3*y2) / ((x2-x3) * (x1-x2) * (x1-x3));
        this.b = ((y2-y3)*x1*x1 + x2*x2*y3 - x3*x3*y2 - (x2*x2 - x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
        this.c = ((x2*y3 - x3*y2)*x1*x1 - (x2*x2*y3 - x3*x3*y2)*x1 + (x2*x2*x3 - x2*x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
        this.move(x1, x2)
      }
    }
    move (start, end) {
      // start是运动起始横坐标，end是终点横坐标
      var left = start

      var div = document.createElement('div')
      div.className = 'active'
      document.body.appendChild(div)
      var timer = setInterval(() => {
        div.style.left = left + 'px'
        div.style.top = this.a * left * left + this.b * left + this.c + 'px'
        left += 5
        // 判断结束
        if (left >= end) {
          clearInterval(timer)
          // 让div消失
          document.body.removeChild(div)
          // 购物车数量加一
          this.shopNum.innerHTML = Number(this.shopNum.innerHTML) + 1
        }
      }, 20)
    }
  }

  new Fly()     
} 
</script>

